{% assign show_bottom_border = false %}
{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign border_style = 'border-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign border_style = 'border-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign border_style = 'border-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_bottom_border = true
    when 'black'
      assign background_color = 'bg-black'
      assign border_style = 'border-black'
  endcase
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-inverse'
    else
      assign text_color = ''
  endcase
-%}

{%- if settings.show_cart -%}
  {%- liquid
    assign show_mini_cart = false
    assign show_drawer_cart = false
    case settings.cart_type
      when 'drawer'
        assign show_mini_cart = false 
        if request.page_type != 'cart'
          assign show_drawer_cart = true
        endif
      when 'mini_cart'
        assign show_drawer_cart = false
        if request.page_type != 'cart'
          assign show_mini_cart = true
        endif
      when 'page'
        assign show_drawer_cart = false
        assign show_mini_cart = false
    endcase
    if show_mini_cart or show_drawer_cart
      assign cart_dropdown_style = 'as-cart-dropdown as-dropdown dropdown cursor-pointer'
    endif
  -%}
{% endif %}
<header class="header">
<input type="hidden" value="{% if section.settings.enable_sticky_header %}1{% else %}0{% endif %}" class="as-header-sticky-flag">
<div class="dropdown-backdrop fade as-dropdown-backdrop"></div>
<nav class="as-site-header {{ background_color }} {{ text_color }} site-header navbar py-0 align-items-lg-center align-items-start border-bottom {% unless show_bottom_border %} {{ border_style }} {% endunless %}" data-expand='true'>
  <div class="site-header-container container d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between">
    <ul class="list-unstyled flex-center d-lg-none w-100 mb-0 position-relative nav-height">
      <li class=" nav-expand position-absolute as-expand flex-center">
        <button class="as-navbar-toggler navbar-toggler order-last border-0 px-0 collapsed"
          type="button" data-bs-toggle="collapse" aria-label="Navbar toggler">
          <div class="hamburger-box-wrapper">
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
          </div>
        </button>
      </li>
      <li class="flex-center logo">
        <a class="d-flex flex-column align-items-center text-decoration-none text-primary text-decoration-none" href="{{ routes.root_url }}">
          {%- if section.settings.logo != blank -%}
            {%- assign image_size = section.settings.logo_width | append: 'x' -%}
            <img width="auto" height="auto" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo | img_url: image_size }}"
              loading="lazy"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
            >
          {%- else -%}
            <span class="h6 mb-0">{{ shop.name }}</span>
          {%- endif -%}
        </a>
      </li>
      <li class="position-absolute end-0">
        <ul class="list-unstyled mb-0 nav-icon">
          {%- if settings.show_cart -%}
            <li class="me-4">
              <cart-icon-bubble>
                <a class="as-cart-icon-bubble position-relative icon-btn lh-1 icon-wrapper flex-center lead fw-bold" 
                {% if show_drawer_cart == false %}href="{{ routes.cart_url }}"{% endif %} 
                  id="as-cart-icon-bubble" 
                  data-id="cart-icon-bubble"
                  {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}>    
                  {% render 'cart-icon-bubble' %}
                </a>
              </cart-icon-bubble>
            </li>
          {%- endif -%}
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <li>
                <a class="icon-btn icon-wrapper flex-center lead lh-1" href="{{ routes.account_url }}">
                  <span class="icon-wrap-md">
                    {% render 'icon-user' %}
                  </span>
                </a>
              </li>
            {% else %}
              <li>
                <a class="icon-btn icon-wrapper flex-center lead lh-1" href="{{ routes.account_login_url }}">
                  <span class="icon-wrap-md">
                    {% render 'icon-user' %}
                  </span>
                </a>
              </li>
            {% endif %}
          {% endif %}
        </ul>
      </li>
    </ul>
    <ul class="{{ background_color }} list-unstyled w-100 mb-0 nav-menu flex-column flex-lg-row d-flex align-items-lg-center">
      <li class="flex-center d-none d-lg-flex">
        {%- if request.page_type == 'index' -%}
          <h1 class="mb-0">
        {%- endif -%}
          <a class="logo d-flex pe-1 flex-column align-items-center text-primary text-decoration-none" href="{{ routes.root_url }}">
            {%- if section.settings.logo != blank -%}
              {%- assign image_size = section.settings.logo_width | append: 'x' -%}
              <img width="auto" height="auto" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                src="{{ section.settings.logo | img_url: image_size }}"
                loading="lazy"
                alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
              >
            {%- else -%}
              <span class="h6 mb-0 logo">{{ shop.name }}</span>
            {%- endif -%}
          </a>
        {%- if request.page_type == 'index' -%}
          </h1>
        {%- endif -%}
      </li>
      <li class="d-flex flex-grow-0 flex-lg-grow-1">
        <ul class="d-flex flex-column flex-lg-row list-unstyled w-100 px-0 px-lg-3 nav-link-container">
          {%- for link in linklists[section.settings.main_menu].links -%}
            {% if link.levels == 0 %}
              <li class="nav-item nav-link-wrap">
                <a {% render 'link', link: link.url %} class="nav-link d-flex small fw-bold" href="{{ link.url }}">
                  <span class="position-relative">{{ link.title }}</span>
                </a>
              </li>
            {% elsif link.levels >= 1 %}
              {% comment %} 判断当前二级菜单是否为Mega菜单，并记录匹配的菜单项有多少 {% endcomment %}
              {%- liquid
                assign is_mega_menu = false
                assign current_menu_item_nums = 0
                for sub_menu_item in link.links
                  for block in section.blocks
                    if block.type == 'mega_menu'
                      if block.settings.link == sub_menu_item.url
                        assign is_mega_menu = true
                        assign current_menu_item_nums = current_menu_item_nums | plus: 1
                        break
                      endif
                    endif
                  endfor
                endfor  
              -%}

              {% if is_mega_menu %}
                <li class="nav-item as-dropdown dropdown cursor-pointer" tabindex="0">
                  <a id="dropdownMenuLink{{ forloop.index }}" class="nav-link  dropdown-toggle small fw-bold" data-bs-toggle="dropdown" aria-expanded="false">
                    <span>{{ link.title }}</span>
                    <span class="dropdown-icon">
                      {% render 'icon-chevron-down' %}
                    </span>
                  </a>
                  <div aria-labelledby="dropdownMenuLink{{ forloop.index }}"  class="{{ background_color }} as-dropdown-menu dropdown-menu overflow-hidden py-0 mega-dropdown animate__animated animate__fadeInUp w-100 mt-0 px-sm-0  border-0 rounded-0 ">
                    <div class="pb-3 pt-1 pt-sm-7 pb-sm-7 ">
                    <div class="container">
                      <div class="row row-cols-lg-6 flex-column flex-lg-row g-5">
                        {% for sub_link in link.links %}
                          {% for block in section.blocks %}
                            {% if block.type == 'mega_menu' %}
                              {% if block.settings.link == sub_link.url %}
                                <div class="col mega-dropdown-column">
                                  <div class="position-relative px-0">
                                    <a {% render 'link', link: sub_link.url %} class="mega-dropdown-link text-decoration-none stretched-link" href="{{ sub_link.url }}"></a>
                                      <figure tabindex="0" class="mega-item-figure figure d-flex flex-lg-column flex-row align-items-center mb-0">
                                        {% if section.settings.adapt_to_image_size %}
                                          {% if block.settings.img != blank %}
                                            <img width="auto" height="auto" loading="lazy" class="h-100 mega-menu-figure w-100 object-fit-cover embed-responsive-item img-fluid" src="{{ block.settings.img | img_url: 'master' }}" alt="{{ block.settings.img.alt }}">
                                          {% else %}
                                            {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100 mega-menu-figure' }}
                                          {% endif %}
                                        {% else %}
                                          <div class="ratio ratio-1x1 figure-img flex-shrink-0">
                                            {% if block.settings.img != blank %}
                                              <img width="auto" height="auto" loading="lazy" class="object-fit-cover embed-responsive-item img-fluid" src="{{ block.settings.img | img_url: 'master' }}" alt="{{ block.settings.img.alt }}">
                                            {% else %}
                                              {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
                                            {% endif %}
                                          </div>
                                        {% endif %}
                                        <figcaption class="figure-caption mx-3 mx-lg-0 mt-lg-3">{{ sub_link.title }}</figcaption>
                                      </figure>
                                  </div>
                                </div>
                                {% break %}
                              {% endif %}
                            {% endif %}
                          {% endfor %}
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  </div>
                </li>
              {% else %}
                <li class="nav-item cursor-pointer as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center" tabindex="0">
                  <a id="dropdownMenuLink{{ forloop.index }}"
                    class="nav-link dropdown-toggle small fw-bold" data-bs-toggle="dropdown" 
                    aria-expanded="false">
                    <span>{{ link.title }}</span>
                    <span class="dropdown-icon">{% render 'icon-chevron-down' %}</span>
                  </a>
                  {%- assign submenu = link.links -%}
                  <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu border-0 px-3 px-lg-2 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center text-start">
                    <div class="pb-3 pb-lg-2 pt-0 pt-lg-2">
                    {% for sublink in submenu %}
                      <a {% render 'link', link: sublink.url %} class="dropdown-item lh-base px-0 px-lg-4" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                    {% endfor %}
                  </div>
                  </div>
                </li>
              {% endif %} 
            {% endif %}
          {%- endfor -%}
        </ul>
      </li>
      <li class="d-none d-lg-block position-relative">
        <ul class="list-unstyled d-flex align-items-center mb-0 h-100 flex-column flex-lg-row px-3 px-lg-0 nav-icon me-n2">
          {%- if settings.show_cart -%}
          
            <li class="me-2 me-md-3 {{ cart_dropdown_style }}">
              <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                <a {% if show_drawer_cart == false %}href="{{ routes.cart_url }}"{% endif %} 
                {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}
                  class="dropdown-toggle icon-btn lh-1 nav-link" 
                  id="as-cart-icon-bubble-web" 
                  data-id="cart-icon-bubble">
                  {% render 'cart-icon-bubble' %}
                </a>
              </cart-icon-bubble>

              {% if show_mini_cart %}
                <mini-cart 
                  id="mini-cart-items" 
                  class="mini-cart-container dropdown-menu position-absolute end-0 overflow-hidden bg-default border-0 py-0 lh-base text-wrap"
                  data-id="mini-cart">
                  {% render 'mini-cart' %}
                </mini-cart>
              {% endif %}
            </li>
            
          {%- endif -%}
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <li class="nav-item cursor-pointer as-dropdown dropdown d-flex flex-column flex-lg-row justify-content-start justify-content-lg-center me-2" tabindex="0">
                <div class="position-relative h-100 nav-link  px-2 py-lg-0 flex-center icon-wrapper lead" >
                <a
                  class="nav-link dropdown-toggle small icon-btn py-3 px-2" data-bs-toggle="dropdown" 
                  aria-expanded="false">
                  <span class="icon-wrap-md">{% render 'icon-user' %}</span>
                  {% if customer.name %}
                    <span>{{ customer.name | truncate: 12 }}</span>
                  {% endif %}
                </a>
                <div class="as-dropdown-menu border-0 px-3 px-lg-2 py-0 dropdown-menu overflow-hidden dropdown-menu-center user-dropdown text-start {{ background_color }}" >
                  <div class="pb-lg-2 pt-lg-2">
                    <a class="dropdown-item px-lg-4" href="{{ routes.account_url }}">{{ 'customer.account.my_orders' | t }}</a>
                    <a class="dropdown-item px-lg-4" href="{{ routes.account_addresses_url }}">{{ 'customer.account.my_addresses' | t }}</a>
                    <hr class="my-2">
                    <a class="dropdown-item px-lg-4" href="{{ routes.account_logout_url }}">{{ 'customer.customer.log_out' | t }}</a>
                </div>
                </div>
                </div>
              </li>
            {% else %}
              <li class="d-none d-lg-block">
                <div class="nav-link p-0 flex-center lead icon-wrapper">
                  <a href="{{ routes.account_login_url }}" class="icon-btn lh-1 icon-wrap-md">{% render 'icon-user' %}</a>
                </div>
              </li>
            {% endif %}
          {% endif %}
        </ul>
      </li>
    </ul>
  </div>
</nav>
</header>

{%- if settings.show_cart -%}
  {%- if settings.add_to_cart_action == 'show_added_msg' and show_mini_cart -%}
    <div class="cart-notification-container container">
      {% render 'cart-notification', class: 'd-none d-md-block' %}
    </div>
  {%- endif -%}
{%- endif -%}
{% schema %}
  {
    "name": "Header",
    "tag": "section",
    "class": "shopify-section-header as-shopify-header",
    "settings": [
      {
        "label": "Logo image",
        "type": "image_picker",
        "id": "logo"
      },
      {
        "type": "link_list",
        "label": "Main menu",
        "id": "main_menu",
        "default": "main-menu"
      },
      {
        "type": "checkbox",
        "id": "enable_sticky_header",
        "label": "Enable sticky header",
        "default": false,
        "info": "Header shows on the screen as customers scroll up."
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }  
        ],
        "default": "black"
      },
      {
        "type": "checkbox",
        "id": "adapt_to_image_size",
        "label": "Adapt to Image Size",
        "default": false,
        "info": "It works on images in mega menu"
      }
    ],
    "blocks": [
      {
        "type": "mega_menu",
        "name": "Mega menu",
        "settings": [
          {
            "type": "paragraph",
            "content": "Add an image for the specified navigation"
          },
          {
            "type": "image_picker",
            "id": "img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Fill in the URL which need add an image.Please make sure that the link you already exists in the selected navigation, otherwise this block will not be shown."
          },
          {
            "type": "text",
            "id": "optional_title",
            "label": "Optional title"
          }  
        ]
      }
    ]
  }
{% endschema %}